---
title: useDisclosure
package: "@chakra-ui/hooks"
description:
  "React hook to handle common open and close scenarios in UI components"
---

`useDisclosure` is a custom hook used to help handle common `open`, `close`, or
`toggle` scenarios. It can be used to control feedback component such as
[Modal](/docs/overlay/modal), [AlertDialog](/docs/overlay/alert-dialog),
[Drawer](/docs/overlay/drawer), etc.

## Import

```js
import { useDisclosure } from "@chakra-ui/react"
```

## Return value

The `useDisclosure` hook returns an object with the following fields:

| Name       | Type       | Default | Description                                                         |
| ---------- | ---------- | ------- | ------------------------------------------------------------------- |
| `isOpen`   | `boolean`  | `false` | If `true`, it sets the controlled component to its visible state.   |
| `onClose`  | `function` |         | Callback function to set a falsy value for the `isOpen` parameter.  |
| `onOpen`   | `function` |         | Callback function to set a truthy value for the `isOpen` parameter. |
| `onToggle` | `function` |         | Callback function to toggle the value of the `isOpen` parameter.    |

## Usage

```jsx
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer placement="right" onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
          <DrawerBody>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}
```

## Parameters

The `useDisclosure` hook accepts an optional object with the following properties:

<PropsTable of="useDisclosure" />
